<template>
	<view class="cart">
		<uni-swipe-action>
		
			<uni-swipe-action-item v-for="item,index in cartList" :key="item.id" class="action-cart">
				<view class="cart-item">
					<!-- 复选框 -->
					<label>
						<checkbox :checked="item.isCheck" @click="checks(index)"/>
					</label>
					<!-- 图片 -->
					<image :src="item.img" mode="" class="img"></image>
					<view class="cart-right">
						<view class="name">
							{{item.name}}
						</view>
						<view class="cart-cont">
							<view class="price">
								{{item.price}}
							</view>
							<!-- 计数器 -->
							<uni-number-box v-model="item.num" @change="(value)=>changeValue(value,index)"></uni-number-box>
							
						</view>
					</view>
				</view>
				<!-- 删除插槽 -->
				<template v-slot:right>
					<view class="slot-button" @click="del(item.id)"><text>删除</text></view>
				</template>
			</uni-swipe-action-item>
	
		</uni-swipe-action>
		
		
		<!-- 底部 -->
		<view class="bottom">
			<label>
				<checkbox :checked="selectAll" @click="checkAll"/><text>全选</text>
			</label>
			<view class="total">
				￥{{totalMoney}}
			</view>
			<button size="mini" type="warn" @click="selectDel">删除所选</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// cartList:[],
				selectAll:false,//全选按钮的初始值 
			};
		},
		onLoad() {
			// this.cartList = uni.getStorageSync('cart') || []
		},
		methods:{
			// 全选/反选
			checkAll(){
				// 取反
				this.selectAll = !this.selectAll
				this.$store.commit('handeChangeAll',this.selectAll)
				
			},
			// 单选
			checks(index){
				this.$store.commit('checks',index)
				// 把every的返回值赋值给全选按钮
				this.selectAll = this.cartList.every(item=>item.isCheck == true)
			},
			// 单个删除
			del(id){
				this.$store.commit('delOne',id)
			},
			// 选中删除
			selectDel(){
				
				let flag = this.cartList.some(item=>item.isCheck == true)
				if(!flag){
					uni.showToast({
						title:"请选择商品"
					})
				}else{
					this.$store.commit('selectDel')
				}
			},
			// 修改数量
			changeValue(value,index){
				this.$store.commit('changeNum',{value,index})
				
			}
			
		},
		computed:{
			cartList(){
				return this.$store.state.cart
			},
			totalMoney(){
				let total = 0
				this.cartList.forEach(item=>{
					if(item.isCheck){
						total+=item.num*item.price
					}
				})
				return total
			}
		}
	}
</script>

<style lang="scss">
.cart-item{
	display: flex;
	padding:20rpx;
	align-items: center;
	border-bottom: 1px solid #eee;
	.img{
		width: 150rpx;
		height: 150rpx;
		flex-shrink: 0;
		margin-right: 10px;
	}
	.cart-right{
		flex:1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.cart-cont{
			display: flex;
		    align-items: center;
		   justify-content: space-between;
		}
	}
	
}
.slot-button{
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #c00;
	color:#fff;
	font-size: 28rpx;
	height: 100%;
	width: 200rpx;
}
.bottom{
	display: flex;
	width: 100%;
	position: fixed;
	left:0;
	bottom: 0;
	height: 100rpx;
	align-items: center;
	padding: 0 20rpx;
	box-sizing: border-box;
	justify-content: space-between;
}
</style>
